//  prepare our canvas, 

var canvasWidth = 490;
var canvasHeight = 220;
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var clickTime = new Array();
var segmentNr = new Array();
var paint;
var context;
var G_vmlCanvasManager;

var canvasDiv = document.getElementById('canvasDiv');
var canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvas.setAttribute('style', 'border:1px solid black;');
canvasDiv.appendChild(canvas);
if (typeof G_vmlCanvasManager !== 'undefined') {
    canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");

init();

//Mouse Down Event: 
$('#canvas').mousedown(function(e) {
   // alert("Keycode of key pressed: " + (e.keyCode || e.which));
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;
    paint = true;
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, false);
    draw();
});

//Mouse Move Event: 
$('#canvas').mousemove(function(e) {
    writeMessage(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
    if (paint) {
        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
        draw();
    }
});

//Mouse Up Event: 
$('#canvas').mouseup(function(e) {
    paint = false;
});

//Mouse Leave Event:
$('#canvas').mouseleave(function(e) {
    paint = false;
});



// addClick function that will save the click position:
function addClick(x, y, dragging)
{
    clickX.push(x);
    clickY.push(y);
    clickDrag.push(dragging);
    var elapsedTime = new Date();
    clickTime.push(elapsedTime.getTime());
}

//překreslí celý obrázek z pole X/Y/Drag
function redraw() {
    var strokeStylelist = ["#ff0000", "#00ff00", "#0000ff", "#ff00ff", "#ffff00", "#00ffff"];
    var color_index = 0;
    context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
    context.lineJoin = "round";
    context.lineWidth = 5;


    for (var i = 0; i < clickX.length; i++) {
        context.beginPath();
        if (clickDrag[i] && i) {
            context.moveTo(clickX[i - 1], clickY[i - 1]);
        } else {
            context.moveTo(clickX[i] - 1, clickY[i]);
        }
        color_index = (segmentNr[i] - 1) % 6;
        context.strokeStyle = strokeStylelist[color_index ];
        context.lineTo(clickX[i], clickY[i]);
        context.closePath();
        context.stroke();
    }
}

//doplní do obrázku právě kreslený bod
function draw() {
    context.strokeStyle = "#df4b26";
    context.lineJoin = "round";
    context.lineWidth = 6;
    var indexAct = clickX.length - 1;
    var indexPrev = clickX.length - 2;
    context.beginPath();
    if (clickDrag[indexAct]) {
        context.moveTo(clickX[indexPrev], clickY[indexPrev]);
    } else {
        context.moveTo(clickX[indexAct] - 1, clickY[indexAct]);
    }
    context.lineTo(clickX[indexAct], clickY[indexAct]);
    context.closePath();
    context.stroke();

}
//napíše aktuální pozici myše
function writeMessage(X, Y) {
    var MousePosition = document.getElementById('MousePosition');
    var message = 'Mouse position: ' + X + ',' + Y;
    MousePosition.innerHTML = message;
}

//Clear canvas and collected data arrays (RESET) 
$('#clearCanvas').mousedown(function(e)
{
    clickX = new Array();
    clickY = new Array();
    clickDrag = new Array();
    clickTime = new Array();
    segmentNr = new Array();
    context.beginPath();
    context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
    context.closePath();
    $('#showData').mousedown();
});

//show retrieved data
$('#showData').mousedown(function(e)
{
    var startTime = clickTime[0];
    var myTable =
            '<table border="1" >      ' + '\n' +
            ' <tr>                    ' + '\n' +
            '   <th>clickX</th>       ' + '\n' +
            '   <th>clickY</th>       ' + '\n' +
            '   <th>clickDrag</th>    ' + '\n' +
            '   <th>clickTime</th>    ' + '\n' +
            '   <th>SegmentNr</th>    ' + '\n' +
            ' </tr>                   ' + '\n';

    for (index = 0; index < clickX.length; index++) {


        myTable += ' <tr>' + '\n';
        myTable += '   <td>' + clickX[index] + '</td>' + '\n';
        myTable += '   <td>' + clickY[index] + '</td>' + '\n';
        myTable += '   <td>' + clickDrag[index] + '</td>' + '\n';
        myTable += '   <td>' + (clickTime[index] - startTime) + '</td>' + '\n';
        myTable += '   <td>' + segmentNr[index] + '</td>' + '\n';
        myTable += ' </tr>' + '\n';
    }

    myTable +=
            ' </table>';

    var capturedData = document.getElementById('capturedData');
    capturedData.innerHTML = myTable;

    redraw();

});

 $('#showData').mousedown();
 
function touchHandler(event)
{
    var touches = event.changedTouches,
            first = touches[0],
            type = "";
    switch (event.type)
    {
        case "touchstart":
            type = "mousedown";
            break;
        case "touchmove":
            type = "mousemove";
            break;
        case "touchend":
            type = "mouseup";
            break;
        default:
            return;
    }

    //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //           screenX, screenY, clientX, clientY, ctrlKey, 
    //           altKey, shiftKey, metaKey, button, relatedTarget);

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1,
            first.screenX, first.screenY,
            first.clientX, first.clientY, false,
            false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init()
{
    

    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);
    

}




























